<template>
  <div class="self-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>个人中心</span>
        </div>
      </template>

      <div class="profile-section">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="avatar-container">
              <el-avatar :size="120" :src="userInfo.avatar" />
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleAvatarChange"
              >
                <el-button type="primary" size="small">更换头像</el-button>
              </el-upload>
            </div>
          </el-col>
          <el-col :span="18">
            <el-descriptions title="基本信息" :column="2" border>
              <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
              <el-descriptions-item label="角色">{{ userInfo.role }}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{ userInfo.phone }}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
              <el-descriptions-item label="注册时间">{{ userInfo.createTime }}</el-descriptions-item>
              <el-descriptions-item label="最后登录">{{ userInfo.lastLogin }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>

      <el-tabs type="border-card" class="settings-tabs">
        <el-tab-pane label="账号设置">
          <el-form :model="form" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model="form.username" disabled />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSave">保存修改</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="安全设置">
          <el-form label-width="100px">
            <el-form-item label="当前密码">
              <el-input type="password" v-model="security.currentPassword" />
            </el-form-item>
            <el-form-item label="新密码">
              <el-input type="password" v-model="security.newPassword" />
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input type="password" v-model="security.confirmPassword" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleChangePassword">修改密码</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const userInfo = ref({
  username: 'admin',
  role: '超级管理员',
  phone: '13800138000',
  email: 'admin@example.com',
  createTime: '2023-01-01',
  lastLogin: '2025-05-10 12:00:00',
  avatar: ''
})

const form = ref({
  username: userInfo.value.username,
  phone: userInfo.value.phone,
  email: userInfo.value.email
})

const security = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const handleAvatarChange = (file: any) => {
  console.log('Avatar changed', file)
}

const handleSave = () => {
  console.log('Save changes', form.value)
}

const handleChangePassword = () => {
  console.log('Change password', security.value)
}
</script>

<style scoped>
.self-container {
  padding: 20px;
}

.profile-section {
  margin-bottom: 20px;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.settings-tabs {
  margin-top: 20px;
}
</style>
